<template>
	<!-- 司机 未完成 和 已完成 详情，未完成前可以修改， 已完成不可以修改 -->
	<view class="container">
		<!-- 已到厂可以修改 装车榜单 -->
		<view class="centerItem">
			<uni-section type="line" class="mb-10" title="装车信息"></uni-section>
			<!-- 装车信息form -->
			<uni-forms :modelValue="formData">
				<uni-forms-item label-width="180rpx" name="loadingDate" label="装车日期">
					<uni-datetime-picker type="date" v-model="formData.loadingDate" />
				</uni-forms-item>
				<uni-forms-item label-width="180rpx" label="实装吨位" name="loadingTonnage">
					<uni-easyinput type="digit" v-model="formData.loadingTonnage" placeholder="请填写" />
				</uni-forms-item>
				<uni-forms-item label-width="180rpx" label="装车榜单" name="bd">
					<u-upload
						:key="getloadList.length + 'load'"
						width="110"
						height="110"
						ref="rupload"
						:max-count="1"
						:max-size="15 * 1024 * 1024"
						upload-text="上传"
						@on-oversize="() => overSize('装车榜单')"
						@on-success="(data) => onSuccess(data, 'loading')"
						@on-remove="(idx) => onRemove(idx, 'loading')"
						@on-error="onError"
						@on-choose-complete="onChooseComplete"
						:header="header"
						:file-list="getloadList"
						:action="baseFilesURL"
					></u-upload>
				</uni-forms-item>
			</uni-forms>
		</view>
		<view class="centerItem">
			<uni-section type="line" class="mb-10" title="卸车信息"></uni-section>
			<!-- 卸车信息form -->
			<!-- {{ formData }} -->
			<uni-forms :modelValue="formData">
				<uni-forms-item label-width="180rpx" name="unloadDate" label="卸车日期">
					<uni-datetime-picker type="date" v-model="formData.unloadDate" />
				</uni-forms-item>
				<uni-forms-item label-width="180rpx" label="实卸吨位" name="unloadTonnage">
					<uni-easyinput type="digit" v-model="formData.unloadTonnage" placeholder="请填写" />
				</uni-forms-item>
				<uni-forms-item label-width="180rpx" label="卸车榜单" name="bd">
					<u-upload
						:key="getUnloadList.length + 'unload'"
						width="110"
						height="110"
						ref="rupload"
						:max-count="1"
						:max-size="15 * 1024 * 1024"
						upload-text="上传"
						@on-oversize="() => overSize('卸车榜单')"
						@on-success="(data) => onSuccess(data, 'unload')"
						@on-remove="(idx) => onRemove(idx, 'unload')"
						@on-error="onError"
						@on-choose-complete="onChooseComplete"
						:header="header"
						:file-list="getUnloadList"
						:action="baseFilesURL"
					></u-upload>
				</uni-forms-item>
			</uni-forms>
		</view>

		<!-- 卸车之后 不支持单独提交 -->
		<view>
			<u-button type="primary" @click="submit">更新</u-button>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { baseFilesURL, baseFilesVisitURL } from '@/common/request.js';
import { updateBd } from '@/api/logisitcsCompany';
import { navBack, setLoadingToast, setToast } from '@/common/utils';
import { cloneDeep, forIn, isEmpty } from 'lodash';
import { getToken } from '@/common/user';
import colorGradient from '../../../../../uni_modules/vk-uview-ui/libs/function/colorGradient';

const header = {
	'Cache-Id': getToken()
};

// 基本信息
const tableLabel = {
	loadingDate: '装车日期',
	loadingTonnage: '预装吨位',
	loadingPoundAffix: '实际装车吨位',
	unloadDate: '卸车日期',
	unloadTonnage: '实际卸车吨位',
	unloadPoundAffix: '卸车榜单'
};

// 表单信息
const formData = ref({
	loadingDate: '', // 装车日期
	loadingTonnage: '', // 实际装车吨位
	loadingPoundAffix: [], // 装车榜单
	unloadDate: '', // 卸车日期
	unloadTonnage: '', // 实际卸车吨位
	unloadPoundAffix: [] // 卸车榜单
});

// 获取卸车榜单图片
const getUnloadSrc = computed(() => {
	let url: any = '';
	const dep = formData.value.unloadPoundAffix;
	if (dep.length) {
		url = baseFilesVisitURL + dep[0].path;
	}
	return url;
});

// 获取卸车榜单列表
const getUnloadList = computed(() => {
	const dep = formData.value.unloadPoundAffix;
	if (dep.length) {
		dep[0].url = baseFilesVisitURL + dep[0].path;
	}
	return dep;
});

// 获取装车榜单图片
const getLoadSrc = computed(() => {
	let url: any = '';
	const dep = formData.value.loadingPoundAffix;
	if (dep.length) {
		url = baseFilesVisitURL + dep[0].path;
	}
	return url;
});

// 获取装车榜单列表
const getloadList = computed(() => {
	const dep = formData.value.loadingPoundAffix;
	if (dep.length) {
		dep[0].url = baseFilesVisitURL + dep[0].path;
	}
	return dep;
});

const onError = (res: any, type: any) => {
	uni.hideLoading();
	setToast('图片上传失败');
};

const onSuccess = (data: any, type: any) => {
	uni.hideLoading();
	// type == loading  装车
	// type == unload  卸车
	// loadingPoundAffix unloadPoundAffix
	const dep = data.data;
	// 图片添加类型（PC展示需要此类型）
	dep.type = 'image';
	dep.suffix = '.' + dep.suffix;
	if (type == 'loading') {
		formData.value.loadingPoundAffix.push(dep);
	} else {
		formData.value.unloadPoundAffix.push(dep);
	}
	setToast('上传成功');
};

// 移除文件 删除 Forms.value.image
const onRemove = (index: any, type: any) => {
	if (type == 'loading') {
		formData.value.loadingPoundAffix.splice(0, 1);
	} else {
		formData.value.unloadPoundAffix.splice(0, 1);
	}
	setToast('删除成功');
};

const onChooseComplete = () => {
	setLoadingToast('上传中...');
};
// 图片大小超出限制
const overSize = (name) => {
	setToast(`${name}大小超出限制15MB`);
};

// 给上传的
const submit = () => {
	uni.showModal({
		title: '操作确认',
		content: '确认更新榜单信息吗？此操作会覆盖原榜单数据',
		showCancel: true,
		cancelText: '取消',
		confirmText: '提交',
		success: (res) => {
			if (res.confirm) {
				const deep: any = cloneDeep(formData.value);
				deep.id = cache.value.id;
				deep.loadingPoundAffix = JSON.stringify(deep.loadingPoundAffix);
				deep.unloadPoundAffix = JSON.stringify(deep.unloadPoundAffix);
				// // 删除空白字段
				// for (var key in deep) {
				// 	if (key === 'loadingPoundAffix' || key === 'unloadPoundAffix') {
				// 		if (deep[key].length == 0) delete deep[key];
				// 	} else if (!deep[key]) {
				// 		delete deep[key];
				// 	}
				// }

				setLoadingToast('提交中...');
				updateBd(deep).then((res: any) => {
					uni.hideLoading();
					if (res.data !== false) {
						uni.$emit('uploadOk');
						navBack();
						setToast('更新成功');
					}
				});
			}
		},
		fail: () => {},
		complete: () => {}
	});
};

const updateData = (data: any) => {
	const { loadingTonnage = '', loadingPoundAffix, unloadTonnage = '', unloadDate, loadingDate, unloadPoundAffix }: any = data;
	const parse = (jsonData: any) => {
		const data = JSON.parse(jsonData || '[]');
		return data.map((v: any) => {
			v.url = baseFilesVisitURL + v.path;
			return v;
		});
	};
	formData.value = {
		...formData.value,
		loadingTonnage: loadingTonnage || '',
		loadingPoundAffix: parse(loadingPoundAffix),
		unloadTonnage: unloadTonnage || '',
		unloadDate,
		loadingDate,
		unloadPoundAffix: parse(unloadPoundAffix)
	};
};

const cache = ref<any>({});
onLoad((options) => {
	const D = JSON.parse(decodeURIComponent(options.item));
	cache.value = D.vd;
	// 渲染装卸车信息
	updateData(D.vd);
});
</script>

<style lang="scss" scoped>
@import './uploadBd.scss';
</style>

<style>
.uni-section-header {
	padding: 12px 10px 0 !important;
}
</style>
